<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <title>后台管理</title>
  <style>
    img {
      width: 115px;
      height: 172px;
    }

    .search {
      margin-top: 10px;
      margin-left: 50px;
      width: 400px !important;
      float: left;
      display: inline-block !important;
    }

    .list {
      margin-left: 50px !important;
      font-size: 17px;
    }

    .icon {
      cursor: pointer;
      margin-left: 5px;
      margin-top: 10px;
      display: inline-block !important;
      float: left;
    }


    .book-info {
      position: absolute;
      left: 160px;
      top: 50px;
      height: 150px;
      width: 200px;
      overflow: hidden;
    }

    .book-sale {
      position: absolute;
      left: 300px;
      top: 45px;
      height: 120px;
      width: 700px;
    }

    .detail {
      margin-top: 7px;
      font-size: 14px;
      height: 70px;
      -webkit-line-clamp: 3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
    }

    .author {
      margin-top: 5px;
      font-size: 13px;
    }

    .price {
      margin-top: 5px;
      color: #ff2832;
      font-size: 18px;
    }

    .title {
      margin-top: 5px;
      font-size: 18px;
      color: #2e6da4;
    }

    .book-number {
      margin-left: 40px;
      margin-top: 50px;
      margin-bottom: 30px;
      float: left;
      font-size: 20px;
      color: #337ab7;
    }


    .list-group-item {
      margin-left: 100px;
      margin-right: 100px;
    }

    .list-group-horizontal {
      padding-right: 50px;
    }




    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0;
    }

    input[type="number"] {
      -moz-appearance: textfield;
    }

    .sum {
      margin-top: 50px;
      float: left;
      font-size: 20px;
      color: red;
      margin-left: 30px;
    }
    .time{
      float: left;
      margin-left: 50px;
      margin-top: 50px;
      font-size: 20px;
    }
    .order-id{
      float: left;
      margin-left: 50px;
      margin-top: 50px;
      font-size: 20px;
    }

    .form {
      float: left;
    }

  </style>
</head>
<body>
<link rel="stylesheet" th:href="@{/css/bootstrap-3.3.7.css}">
<script th:src="@{/script/jquery-2.1.1.js}"></script>
<script th:src="@{/script/bootstrap-3.3.7.js}"></script>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" th:href="@{/user/main}">基于springboot+mybatis+springsecuity+jwt的图书交易系统</a>
      <svg t="1670769465107" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="2534" width="30" height="30">
        <path d="M896 128v832H224a96 96 0 1 1 0-192H832V0H192C121.6 0 64 57.6 64 128v768c0 70.4 57.6 128 128 128h768V128h-64z"
              fill="" p-id="2535"></path>
        <path d="M224.064 832H224a32 32 0 0 0 0 64H831.936v-64H224.064z" fill="" p-id="2536"></path>
      </svg>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <form th:action="@{/user/select}" method="post" class="form">
          <input type="text" placeholder="请输入图书名" class="form-control search"
                 name="bookName" id="bookName"/>
          <svg onclick="$('form').submit()" class="icon" t="1670244573250" viewBox="0 0 1024 1024"
               version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               p-id="918" width="30" height="30">
            <path d="M909.632 854.528l-259.712-259.712c40.32-52.096 62.08-115.84 62.08-182.848a298.24 298.24 0 0 0-87.872-212.096A297.792 297.792 0 0 0 411.968 112a298.24 298.24 0 0 0-212.096 87.872A297.6 297.6 0 0 0 112 411.968c0 80.128 31.36 155.52 87.872 212.16a297.6 297.6 0 0 0 212.096 87.872 297.6 297.6 0 0 0 182.72-62.016l259.712 259.584c3.2 3.2 8.384 3.2 11.584 0l43.584-43.52a8.192 8.192 0 0 0 0-11.52z m-339.2-284.16a222.784 222.784 0 0 1-158.464 65.6 222.784 222.784 0 0 1-158.4-65.536 222.784 222.784 0 0 1-65.6-158.464c0-59.776 23.36-116.096 65.664-158.4a222.784 222.784 0 0 1 158.336-65.6c59.84 0 116.16 23.232 158.4 65.664a222.784 222.784 0 0 1 65.6 158.336c0 59.84-23.296 116.16-65.536 158.4z"
                  p-id="919" fill="#707070">
            </path>
          </svg>
        </form>
        <li class="list"><a th:href="@{/user/cart}">我的订单</a></li>
        <li class="list"><a th:href="@{/user/cart}">购物车</a></li>
        <li class="list"><a th:href="@{/logout}">退出系统</a></li>
        <li class="list"><a th:href="@{/logout}">admin@localhost</a></li>
      </ul>
    </div>
  </div>
</nav>
<ul class="list-group-horizontal">
  <li class="list-group-item" th:each="book:${orderList}">

    <a class="book-img"><img th:src="'http://'+${book.bookUrl}" alt="着魔"></a>
    <div class="book-info">
      <div class="title" th:text="${book.bookName}" >着魔</div>
      <div class="author" th:text="${book.bookAuthor}">赫尔曼·布洛赫</div>
      <!--      <div class="price" id="price" th:text="'¥'+${book.bookPrice}" th:value="${book.bookPrice}">¥78.00</div>-->
    </div>
    <div class="book-sale">
      <div class="order-id" th:text="${book.orderTime}">1670778581</div>
      <div class="book-number" id="bookNum" th:value="${book.bookNum}" th:text="${book.bookNum}">共1本</div>
      <div class="sum" id="sum" th:text="'共'+${book.bookPrice}+'元'">共78元</div>
      <div class="time">2022-12-04 18:41:40</div>
    </div>

  </li>

</ul>

</body>
</html>